<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      /* 
      第一种：float+overflow:hidden
       */
      /* body,
      p {
        margin: 0;
        padding: 0;
      }

      .left {
        background: yellowgreen;
        float: left;
        margin-right: 20px;
      }

      .right {
        overflow: hidden;
        background: pink;
      }

      设置.left元素下面的内容
      .left p {
        width: 300px;
      }

      */

      /* 
      第二种：table
       */
      /* body,
      p {
        margin: 0;
        padding: 0;
      }

      .parent {
        display: table;
        width: 100%;
      }

      .left {
        padding-right: 20px;
        width: 0.1%;
        display: table-cell;
      }

      .right {
        background: pink;
        display: table-cell;
      }

      .left p {
        width: 300px;
        background: yellowgreen;
      } */


      body,
      p {
        margin: 0;
        padding: 0;
      }

      .parent {
        display: flex;
      }

      .left {
        padding-right: 20px;

      }

      .right {
        background: pink;
        flex: 1;
      }

      .left p {
        width: 300px;
        background: yellowgreen;
      }
    </style>
  </head>

  <body>
    <div class="parent">
      <div class="left">
        <p>left</p>
      </div>
      <div class="right">
        <p>right</p>
        <p>right</p>
      </div>
    </div>
  </body>

</html>